<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/element.css?v=1">
    <script src="../../js/zyrpublic.js?v=1.0"></script>
    <script src="../../js/zyrfunction.js?v=1.0"></script>
    <script src="../../javascript/vue.js"></script>
    <script src="../../javascript/elementui.js"></script>
    <script src="../../javascript/axios.min.js"></script>
</head>
<style>
    .el-dialog__header {
        background-color: #129280;
        padding-bottom: 15px !important;
        padding-top: 15px !important;

    }

    .el-dialog__header>.el-dialog__title {
        color: #fff;

    }

    .el-dialog__headerbtn .el-dialog__close {
        color: #fff !important;
        font-size: 20px;
    }

    .el-dialog__footer {
        text-align: center !important;
    }
</style>

<body>
    <div class="page-wrap" id="app">
        <section class="page-hd t">
            <header>
                <h5 class="title">
                    <a href="#" class="red">等级设置</a>
                </h5>
            </header>
            <hr />
        </section>
        <el-tabs type="border-card" @tab-click="handleClickTab">
            <el-tab-pane label="会员模式">
                <div>
                    <el-button @click.stop="opendemotion" type="primary">配置降级规则</el-button>
                    <el-button type="primary" @click.stop="setCountDate">结算日设置</el-button>
                </div>
                <div style="margin-top: 20px;">

                    <el-table border :data="membertableData" style="width: 100%"
                        :header-cell-style="{background:'#f7f4f8', color:'#000'}">
                        <el-table-column prop="level" label="会员等级" width="80">
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="80">
                        </el-table-column>
                        <el-table-column prop="levelCondition" label="等级条件">
                            <template slot-scope="scope">
                                <div>
                                    <span>{{scope.row.levelCondition}}</span>
                                    <span v-if="scope.row.nextLevelCondition"> ~ {{scope.row.nextLevelCondition}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="privilegeDesc" label="会员特权">
                        </el-table-column>
                        <el-table-column prop="upgradeDesc" label="升级赠礼">
                        </el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="editLevel(scope.row)" type="text" size="small">
                                    编辑
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
            </el-tab-pane>
            <el-tab-pane label="VIP模式">
                <el-button type="primary" @click="handleMoneySet">金额设置</el-button>
                <div style="margin-top: 20px;">

                    <el-table border :data="membertableData" style="width: 100%"
                        :header-cell-style="{background:'#f7f4f8', color:'#000'}">
                        <el-table-column prop="name" label="名称" width="80">
                        </el-table-column>
                        <el-table-column prop="vipCostAmount" label="金额">
                        </el-table-column>
                        <el-table-column prop="privilegeDesc" label="会员特权">
                        </el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="editLevel(scope.row)" type="text" size="small">
                                    编辑
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
            </el-tab-pane>

        </el-tabs>

        <el-dialog title="金额设置" :visible.sync="showMoneySet" width="50%" :close-on-click-modal="false"
            @close="showMoneySet = false">
            <div v-for="(item,index) in moneyList" :key="index" style="margin: 10px 0;">
                {{index+1}}.{{item.name}}需要支付金额：
                <input style="width: 35px; margin: 0 2px; border: 1px solid #B8B8B8; text-align: center;" type="number"
                    v-model="item.vipCostAmount" />元
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button style="margin-right: 30px;" round type="primary" @click="confirmMoneySet">确 认</el-button>
                <el-button @click="showMoneySet = false" round>取 消</el-button>

            </span>
        </el-dialog>

        <el-dialog title="降级规则" :visible.sync="demotionVis" width="70%" :close-on-click-modal="false"
            @close="demotionVis = false">

            <div style="margin-bottom: 20px;">
                <el-radio size="medium " v-model="demotionObj.downEnable" @change="handleChangeRad" :label="0">暂不降级
                </el-radio>

            </div>
            <div>
                <el-radio size="medium" v-model="demotionObj.downEnable" :label="1">
                    获得等级<input style="width: 35px; margin: 0 2px; border: 1px solid #B8B8B8; text-align: center;"
                        type="text" v-model="demotionObj.monthInterval" />月内，如果消费金额低于<input
                        style="width: 45px; margin: 0 2px; border: 1px solid #B8B8B8; text-align: center;" type="text"
                        v-model="demotionObj.notReachAmount" />元,
                    则结算日系统自动扣减<input style="width: 35px; margin: 0 2px; border: 1px solid #B8B8B8; text-align: center;"
                        type="text" v-model="demotionObj.deductPercentage" />%的经验值
                </el-radio>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button style="margin-right: 30px;" round type="primary" @click="demotionSubmit">确 认</el-button>
                <el-button @click="demotionVis = false" round>取 消</el-button>

            </span>
        </el-dialog>

        <el-dialog title="结算日期设置" :visible.sync="dateVis" width="50%" :close-on-click-modal="false"
            @close="dateVis = false">

            <div style="display: flex; align-items: center; margin-bottom: 10px; margin-left: 30px;"
                v-for="(e, i) in countDate" :key="i">
                <el-checkbox size="medium" v-model="e.enable"></el-checkbox>
                <div style="margin-left: 20px;">
                    <span>1.</span>
                    <el-date-picker v-model="e.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                    <span>结算一次</span>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button style="margin-right: 30px;" round type="primary" @click="editSubmit">确 认</el-button>
                <el-button @click="dateVis = false" round>取 消</el-button>

            </span>
        </el-dialog>

    </div>
    <!---page-wrap------>

</body>


<script>
    var instance = axios.create({
        baseURL: httpurl,
        timeout: 3000,
        headers: {
            'Cache-Control': 'no-cache',
            'Content-Type': 'application/json',
            "Authorization": GetTokenInfo()
        }
    })
</script>

<script>

    var app = new Vue({
        el: "#app",
        data() {
            return {

                datecheck: '',
                datecheck1: '',
                datecheck2: '',
                datecheck3: '',

                // priceInp: '',
                // experienceInp: '',
                // timeInp: '',
                // radioRule: '0',
                demotionVis: false,
                dateVis: false,
                demotionObj: {
                    id: '',
                    downEnable: '0',
                    monthInterval: '',
                    notReachAmount: '',
                    deductPercentage: ''
                }, //降级规则
                countDate: [], //结算日
                membertableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                showMoneySet: false,
                moneyList: [],
                defalutmoneyList: []
            };
        },

        mounted() {

            this.getqueryMemberSetupByType(1)
        },

        methods: {
            // 结算时间
            setCountDate() {
                this.dateVis = true
                this.getqueryDateTimeListByType()
            },
            //打开降级窗
            opendemotion() {
                this.demotionVis = true
                this.getqueryMemberDownLevel()
            },

            //
            handleChangeRad(e) {
                // this.demotionObj.monthInterval = ''
                // this.demotionObj.notReachAmount = ''
                // this.demotionObj.deductPercentage = ''
            },
            //获取降级规则
            getqueryMemberDownLevel() {
                instance.get('queryMemberDownLevel?id=1')
                    .then(res => {
                        if (res.data.rtnCode == 200) {
                            this.demotionObj = res.data.data


                        }
                    })
            },

            //降级提交
            demotionSubmit() {
                // console.log(this.demotionObj);
                instance.post('updateMemberDownLevel', this.demotionObj)
                    .then(res => {

                        if (res.data.rtnCode == 200) {
                            this.$message.success('修改成功')
                            this.demotionVis = false
                        } else {
                            this.$message.error('修改失败')
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            // 编辑提交
            editSubmit() {
                console.log(this.countDate);
                let list = this.countDate
                list = list.map(e => {
                    return {
                        id: e.id,
                        startTime: e.startTime,
                        enable: e.enable ? 1 : 0
                    }
                })
                instance.post('updateDateTimeListByList', list)
                    .then(res => {
                        console.log(res);
                        if (res.data.rtnCode == 200) {
                            this.dateVis = false
                            this.$message.success('修改成功')
                        } else {
                            this.$message.error('修改失败')
                        }
                    })


            },

            handleClickTab(e) {

                let index = +e.index + 1
                this.tabIndex = index
                this.getqueryMemberSetupByType(this.tabIndex)
                console.log(index);
            },
            //
            editLevel(e) {
                window.location.href = `editLevel.html?id=${e.id}&type=2`

            },
            //
            getqueryMemberSetupByType(type) {
                instance.get(`queryMemberSetupByType?type=${type}`)
                    .then(res => {
                        console.log(res);
                        if (res.data.rtnCode == 200) {
                            this.membertableData = res.data.data
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            // 查询时间列表
            getqueryDateTimeListByType() {
                instance.get(`queryDateTimeListByType?type=0&order=1`)
                    .then(res => {
                        console.log(res);
                        if (res.data.rtnCode == 200) {
                            let list = res.data.data
                            this.countDate = list.map(e => {
                                return {
                                    id: e.id,
                                    startTime: e.startTime,
                                    enable: e.enable == 0 ? false : true
                                }
                            })
                            // this.countDate = res.data.data
                        }
                    })
            },
            //批量修改时间
            editupdateDateTimeListByList() {
                instance.post('updateDateTimeListByList')
            },
            handleMoneySet() {
                this.getQueryMemberSetupByTypeToVipCost()
                this.showMoneySet = true
            },
            // 点击确认修改金额设置
            confirmMoneySet() {
                console.log(this.moneyList);
                this.editupdateMemberSetupByBoList()
            },
            getQueryMemberSetupByTypeToVipCost() {
                instance.get('queryMemberSetupByTypeToVipCost').then(res => {
                    console.log(res);
                    if (res.data.rtnCode == 200) {
                        this.moneyList = res.data.data
                        this.moneyList.forEach(v => {
                            let obj = {}
                            obj.id = v.id
                            obj.vipCostAmount = v.vipCostAmount
                            this.defalutmoneyList.push(obj)
                        })
                    }
                })
            },
            editupdateMemberSetupByBoList() {
                let list = []
                for (let i = 0; i < this.defalutmoneyList.length; i++) {
                    if (this.defalutmoneyList[i].vipCostAmount != this.moneyList[i].vipCostAmount) {
                        let obj = {
                            id: this.moneyList[i].id,
                            vipCostAmount: this.moneyList[i].vipCostAmount
                        }
                        list.push(obj)
                    }
                }
                instance.post('updateMemberSetupByBoList', list).then(res => {
                    if (res.data.rtnCode == 200) {
                        this.showMoneySet = false
                        this.getqueryMemberSetupByType(2)
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            }
        },
    });
</script>

</html>